<template>
  <div class="page">
    <sub-header :title="title"></sub-header>
    <div class='main'>
      <div class='tip'>
        <div class='icon'></div>
        <div class='text'>新手机号验证后，即可绑定成功！</div>
      </div>
      <div class='input-wrap' style="margin-top:0.5rem">
        <input type="tel" class='cellphone' placeholder='绑定手机号' v-model="cellphone"/>
      </div>
      <div class='input-wrap' style="margin-top:0.2rem">
        <input type="text" class='code' placeholder='请输入短信验证码' v-model="msgCode"/>
        <div class="code-btn" :class="{ success: isSendMsgCode && isCode }" @click="getMsgCode">{{msgCodeText}}</div>
      </div>
      <div class='save-btn' @click="submit">下一步</div>
    </div>
  </div>
</template>

<script>
import SubHeader from 'components/SubHeader'
import { isReg, updateCellphoneData } from '../../../api/user'
import { mapState } from 'vuex'

export default {
  name: 'cellphone',
  data () {
    return {
      cellphone: '',
      msgCodeText: '获取验证码',
      msgCode: '',
      isCode: true,
      title: this.$route.meta.title,
    }
  },
  computed: {
    ...mapState({
      uid: state => state.user.uid
    }),
    isSendMsgCode: function () {
      if (!this.cellphone.match(/^\s*$/) && this.cellphone.match(/^1\d{10}$/)) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    async getMsgCode () {
      if (this.cellphone.match(/^\s*$/)) {
        this.$toast('请输入手机号')
        return
      }
      if (!this.cellphone.match(/^1\d{10}$/)) {
        this.$toast('您输入的手机号码不正确')
        return
      }
      if (this.isCode && this.isSendMsgCode) {
        let res = await isReg(this.cellphone)
        if (res.data.isreg === '1') {
          this.$toast('此手机号已注册过，请更换手机号')
          return
        }
        this.isCode = false
        this.codeBtnTime()
      }
    },
    codeBtnTime (time = 10) {
      this.msgCodeText = `重新获取(${time})`
      this.timer = setInterval(() => {
        time--
        this.msgCodeText = `重新获取(${time})`
        if (time === 0) {
          clearInterval(this.timer)
          this.msgCodeText = '获取验证码'
          this.isCode = true
        }
      }, 1000)
    },
    async submit () {
      if (this.isSubmit) {
        if (this.cellphone.match(/^\s*$/)) {
          this.$toast('请输入手机号')
          return
        }
        if (!this.cellphone.match(/^1\d{10}$/)) {
          this.$toast('您输入的手机号码不正确')
          return
        }
        if (this.msgCode.match(/^\s*$/)) {
          this.$toast('请输入验证码')
          return
        }

        let regData = await isReg(this.cellphone)
        if (regData.data.isreg === '1') {
          this.$toast('此手机号已注册过，请更换手机号')
          return
        }

        this.isSubmit = false
        let res = await updateCellphoneData({
          uid: this.uid,
          cellphone: this.cellphone,
          vcode: this.msgCode
        })
        if (res.code === 200) {
          this.$toast({
            message: '修改成功',
            onClose: () => {
              this.$router.go(-1)
            }
          })
        } else {
          this.$toast(res.data)
        }
      }
    }
  },
  created () {
    this.isSubmit = true
    document.title = this.title
  },
  components: {
    SubHeader
  }
}
</script>

<style scoped>
  .page {
    width: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
  }

  .main {
    width: 100%;
    padding-top: 1.02rem;
  }

  .main .tip {
    width: 100%;
    height: 1rem;
    background-color: #F3F5C4;
    color: #ac7700;
    font-size: 0.28rem;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }

  .main .tip .icon {
    width: 0.4rem;
    height: 0.4rem;
    background-image: url("../../../assets/images/user/mobile/tip.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 0.4rem;
    margin-right: 0.2rem;
  }

  .main .tip .text {
    width: auto;
    height: auto;
  }

  .main .input-wrap {
    width: 93%;
    height: 0.8rem;
    border: #c5cbcf solid 1px;
    border-radius: 4px;
    margin: 0 auto;
    overflow: hidden;
  }

  .main .input-wrap .cellphone {
    width: 93%;
    height: 90%;
    font-size: 0.28rem;
    margin-left: 0.2rem;
    margin-top: 0.05rem;
  }

  .main .input-wrap .code {
    width: 69%;
    height: 90%;
    font-size: 0.28rem;
    margin-left: 0.2rem;
    margin-top: 0.05rem;
    float: left;
  }

  .main .input-wrap .code-btn {
    width: 27%;
    height: 100%;
    border-left: #EFEFEF 1px solid;
    float: left;
    font-size: 0.28rem;
    color: #717376;
    text-align: center;
    line-height: 0.8rem;
  }

  .main .input-wrap .code-btn.success {
    color: #EB1625
  }

  .main .save-btn {
    width: 93%;
    height: 0.8rem;
    background-color: #E42321;
    font-size: 0.28rem;
    color: #FFFFFF;
    text-align: center;
    line-height: 0.8rem;
    margin: 0 auto;
    border-radius: 4px;
    margin-top: 0.2rem;
  }
</style>
